<template>
  <div id="home" class="home">
    <img
      class="animate__animated animate__bounce"
      alt="Vue logo"
      src="../assets/logo.png"
    />
    <img
      class="animate__animated animate__backInRight"
      :src="require('@/assets/logo.png')"
      alt=""
    />
    <HelloWorld msg="Welcome to Your Vue.js App" />

    <router-link to="/">go to index.html</router-link>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  beforeCreate() {
    console.log("home beforeCreate....");
  },
  created() {
    console.log("home created....");
  },
  beforeMount() {
    console.log("home beforeMount...");
  },
  mounted() {
    console.log("home mounted...");
  },
  beforeUpdate() {
    console.log("home beforeUpdate....");
  },
  updated() {
    console.log("home updated...");
  },
  beforeDestroy() {
    console.log("home beforeDestroy...");
  },
  destroyed() {
    console.log("home destroyed...");
  },
};
</script>
